$base-url: '../images/simple-icons/' !default;
$size: 48;

@mixin get-ico-image($name) {
    background-image: url('#{$base-url}#{$name}-#{$size}.png');
}

.social-links {
    a {
        text-indent: -9999em;

        opacity: .3;
        background-repeat: no-repeat;
        background-position: center center;

        filter: alpha(opacity=30);
        &:hover {
            -webkit-transition: all .3s ease-out;
               -moz-transition: all .3s ease-out;
                 -o-transition: all .3s ease-out;
                    transition: all .3s ease-out;

            opacity: 1.0;

            filter: alpha(opacity=100);
        }
    }

    .ico-facebook {
        @include get-ico-image(facebook);

        background-color: #3B5998;
    }

    .ico-github {
        @include get-ico-image(github);

        background-color: #181717;
    }

    .ico-gmail {
        @include get-ico-image(gmail);

        background-color: #D14836;
    }

    .ico-instagram {
        @include get-ico-image(instagram);

        background-color: #E4405F;
    }

    .ico-linkedin {
        @include get-ico-image(linkedin);

        background-color: #0077B5;
    }

    .ico-rss {
        @include get-ico-image(rss);

        background-color: #FFA500;
    }

    .ico-stackoverflow {
        @include get-ico-image(stackoverflow);

        background-color: #FE7A16;
    }

    .ico-twitter {
        @include get-ico-image(twitter);

        background-color: #1DA1F2;
    }

    .ico-vk {
        @include get-ico-image(vk);

        background-color: #6383A8;
    }
}
